<template>
    <el-config-provider :z-index="3000">
        <NuxtLoadingIndicator color="#0f70d8" :height="2" />
        <NuxtPage />
    </el-config-provider >
</template>

<script setup lang="ts">
import { ID_INJECTION_KEY, ElConfigProvider } from 'element-plus'
import { useWindowSize, watchThrottled } from '@vueuse/core'
import useAppStore from './stores/app'
import useUserStore from './stores/user'
import useConfStore from './stores/conf'

const appStore = useAppStore()
const userStore = useUserStore()
const confStore = useConfStore()
await appStore.initialize()

const pcConfig = appStore.getPcConfig
const websiteConfig = appStore.getWebsiteConfig

provide(ID_INJECTION_KEY, {
    prefix: 100,
    current: 0
})

useHead({
    title: pcConfig.title,
    link: [
        {
            rel: 'icon',
            href: pcConfig.favicon
        }
    ],
    meta: [
        {
            name: 'keywords',
            content: pcConfig.keywords
        },
        {
            name: 'description',
            content: pcConfig.description
        }
    ],
    script: websiteConfig.analyse ? [{src: websiteConfig.analyse}] : []
})

const { start } = usePolling(appStore.getMonitor, {
    key: 'monitor',
    time: 1000 * 20, // 20s/次
    totalTime: 1000 * 60 * 360,
    callback: () => {}
})

const { width } = useWindowSize()
watchThrottled(
    width,
    (value) => {
        const SM = 640
        if (value > SM) {
            appStore.setMobile(false)

        } else {
            appStore.setMobile(true)
        }
    },
    {
        immediate: true
    }
)

onMounted(async () => {
    confStore.setTheme(
        confStore.isDarkColor,
        confStore.primaryTheme
    )

    if (userStore.isLogin) {
        await appStore.getMonitor()
        start()
    }
})
</script>
